<template>
  <div id="app">
     <ul>
      <li v-for="(item,index) in list" :key="index" @click="goToPage(item.url,index)" :class="{active:currIndex==index}">
        <p>{{item.title}}</p>
      </li>
     </ul>
  
    <router-view></router-view>
  </div>
</template>
<script>
export default {
    data(){
    return {
       list:[{url:"/home",title:"首页"},{url:"/swagger",title:"Swagger Models"},{url:"/word",title:"文档管理"}],
       currIndex:0
    }
  },
   methods:{
      goToPage(v,i){
       this.$router.push(v)
       this.currIndex=i
    }
   },
   components:{
    //  Word
   }
}
</script>
<style>
*{
  margin: 0;
  padding: 0;
}
#app {
  width: 100%;
}
ul{
  width: 314px;
  list-style: none;
  background: #333;
  color: #999;
}
li{
  height: 40px;
  line-height: 40px;
  text-align: left;
  text-indent: 20px;

}
.active{
 background: rgb(45, 148, 217);
  color: #fff;
}

</style>
